<template>

  <div v-loading="loading" element-loading-text="别要点了，耐心等待..." style="width: 100%;">
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="有接听记录" name="1">
        <div class="w-[98%]">
          <div style="margin-bottom: 10px">
            <el-date-picker type="date" v-model="filter.startTime" value-format="YYYY-MM-DD"
                            placeholder="开始时间"/>
            <el-date-picker style="margin-left: 20px" type="date" v-model="filter.endTime"
                            value-format="YYYY-MM-DD" placeholder="结束时间"/>

            <el-select style="width: 130px;margin-left: 10px" v-model="filter.sex"
                       placeholder="性别"
                       clearable>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
            <el-input style="width: 130px;margin-left: 10px" v-model="filter.phoneCode"
                      placeholder="转接手机号"
                      clearable/>
            <el-select style="width: 80px" v-model="filter.trusteeshipType" clearable filterable placeholder="托管">
              <el-option v-for="item in getEnumBySn('cycleTypeEnum')" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-input style="width: 100px" v-model="filter.indexId" clearable filterable placeholder="合作编号"/>
            <el-input style="width: 200px;margin-left: 10px" v-model="filter.customName"
                      placeholder="客户姓名"
                      clearable></el-input>
            <el-button style="margin-left: 10px" type="primary" @click="fetchData">查询</el-button>
          </div>
          <div v-loading="loading" element-loading-text="不要点了，等着..."
               style="width: 100%;">
            <el-table :data="tableData" style="width: 100%"  :show-overflow-tooltip="true" border stripe>
              <el-table-column label="序号" width="60" align="center" >
                <template #default="{ $index }">
                  {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
                </template>
              </el-table-column>
              <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                               :label="column.label" :width="column.width" :align="column.align">
              </el-table-column>
              <el-table-column label="操作" width="120" fixed="right" align="center">
                <template v-slot="scope">
                  <el-button @click="openVisible(scope.row.orderId)" size="mini"
                             type="danger">接听记录
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalItems"
                         @current-change="currentChange" background layout="total,prev, pager, next"
                         class="pagination" prev-text="上一页" next-text="下一页"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="无接听记录" name="0">
        <div class="w-[98%]">
          <div style="margin-bottom: 10px">
            <el-date-picker type="date" v-model="filter.startTime" value-format="YYYY-MM-DD"
                            placeholder="开始时间"/>
            <el-date-picker style="margin-left: 20px" type="date" v-model="filter.endTime"
                            value-format="YYYY-MM-DD" placeholder="结束时间"/>
            <el-select style="width: 130px;margin-left: 10px" v-model="filter.sex"
                       placeholder="性别"
                       clearable>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
            <el-input style="width: 130px;margin-left: 10px" v-model="filter.phoneCode"
                      placeholder="转接手机号"
                      clearable/>
            <el-select style="width: 80px" v-model="filter.trusteeshipType" clearable filterable placeholder="托管">
              <el-option v-for="item in getEnumBySn('cycleTypeEnum')" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-input style="width: 100px" v-model="filter.indexId" clearable filterable placeholder="合作编号"/>
            <el-input style="width: 200px;" v-model="filter.customName"
                      placeholder="客户姓名"
                      clearable></el-input>
            <el-button style="margin-left: 10px" type="primary" @click="fetchData">查询</el-button>
          </div>


          <div>
            <el-table :data="tableData" style="width: 100%" border stripe :show-overflow-tooltip="true">
              <el-table-column label="序号" width="60" align="center">
                <template #default="{ $index }">
                  {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
                </template>
              </el-table-column>
              <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                               :label="column.label" :width="column.width" :align="column.align">
              </el-table-column>
              <el-table-column label="操作" width="120" fixed="right" align="center">
                <template v-slot="scope">
                  <el-button @click="openVisible(scope.row.orderId)" size="mini"
                             type="danger">接听记录
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalItems"
                         @current-change="currentChange" background layout="total,prev, pager, next"
                         class="pagination" prev-text="上一页" next-text="下一页"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-drawer v-model="Visible" size="60%" :before-close="closeVisible">
      <Custody v-if="Visible" :orderId="currentOrderId" :filter="filter" @close="closeVisible"/>
    </el-drawer>
  </div>


</template>

<script setup>
import {onMounted, ref} from 'vue';
import {getEnumBySn} from "@/api/enums";
import request from '@/config/axios'
import Custody from './Custody.vue'; // 引入子组件

const filter = ref({});
const modalRef = ref();
const activeName = ref('1');
const loading = ref(false);
// // 监听 filter 对象的变化
// watch(filter, (newValue, oldValue) => {
//     fetchData();
// }, { deep: true }); // 使用 deep 选项以便监听嵌套属性的变化
//
// // 监听 filter 对象的变化
// watch(activeName, (newValue, oldValue) => {
//     fetchData();
// }, { deep: true }); // 使用 deep 选项以便监听嵌套属性的变化

const tableData = ref([])

const columns = ref([
  {prop: 'orderStatus', label: '状态', width: '70', align: 'center'},
  {prop: 'orderReceiveDate', label: '接单日期', width: '120', align: 'center'},
  {prop: 'orderEndDate', label: '结束日期', width: '120', align: 'center'},
  {prop: 'indexId', label: '合作编号', width: '90', align: 'center'},
  {prop: 'customName', label: '客户姓名', width: '100', align: 'center'},
  {prop: 'phoneCode', label: '转接手机号', width: '180',},
  {prop: 'trusteeshipType', label: '托管类型', width: '90', align: 'center'},

]);

const totalItems = ref(0);
const currentPage = ref(1);
const pageSize = ref(15);

const currentChange = (v) => {
  currentPage.value = v
  fetchData()
}

const currentOrderId = ref('');
const Visible = ref(false);

function openVisible(orderId) {
  Visible.value = true
  currentOrderId.value = orderId
}

function closeVisible() {
  Visible.value = false
}

async function fetchData() {
  loading.value = true
  const response = await request.get({
    url: '/statistics/getAnswerStatics',
    params: {
      ...filter.value,
      current: currentPage.value,
      size: pageSize.value,
      hasAnswer: activeName.value
    }
  }).then((res) => {
    tableData.value = res.records
    totalItems.value = res.total
    currentPage.value = res.current
    loading.value = false
  }).catch((err) => {
    loading.value = false
  })

}

onMounted(() => {
  fetchData(); //获取列表
});
</script>

<style scoped>
.filter-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-section > * {
  margin-right: 10px;
}

.pagination {
  margin-top: 20px;
  float: right;
}

.drawer-footer {
  text-align: right;
  margin-top: 20px;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
}

.form-inline .el-form-item {
  margin-right: 20px;
}
</style>
